<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>web个人简介</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
		<script src="js/vue.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background: #f1f1f1;
			}

			html {
				/* 设置锚点跳转时的过渡 */
				scroll-behavior: smooth;
			}

			ul {
				list-style: none;
			}

			.blog-masthead {
				background-color: #019875;
				position: fixed;
				width: 100%;
				z-index: 999;
			}

			/* 媒体查询nav*/
			@media (min-width: 1200px) {
				.container {
					width: 970px;
				}
			}

			@media (min-width: 1600px) {
				.container {
					width: 1170px;
				}
			}

			@media (min-width: 992px) {
				.container {
					width: 970px;
				}
			}

			/* @media  (min-width: 768px) {
				.container {
					width: 750px;
				}
			} */

			.container {
				margin-right: auto;
				margin-left: auto;
				padding-left: 15px;
				padding-right: 15px;
				/* background-color: silver; */
			}

			.container::before {
				content: " ";
				display: table;
				box-sizing: border-box;
			}

			/* :after 选择器向选定元素的最后子元素后面插入内容。 */
			/* 做一个下标三角形固定在第一个nav下面 */
			.blog-nav .active:after {
				position: absolute;
				bottom: 0;
				left: 50%;
				width: 0;
				height: 0;
				margin-left: -5px;
				vertical-align: middle;
				/* 垂直居中 */
				content: " ";
				/* 使用content 属性来指定要插入的内容。下面三行是绘制一个下标三角形 */
				border-right: 5px solid transparent;
				border-bottom: 5px solid;
				border-left: 5px solid transparent;
			}

			.blog-nav .active {
				color: #ffffff;
				text-decoration: none;
			}

			.blog-nav-item {
				position: relative;
				display: inline-block;
				padding: 10px;
				font-weight: 800;
				font-size: 20px;
				color: #cdddeb;
				text-decoration: none;
			}

			.blog-nav-item:hover {
				color: #fff;
				text-decoration: none;
				cursor: pointer;
			}

			.intr {
				background-color: #019875;
				background-size: cover;
				width: 100%;
				height: 490px;
				text-align: center;
			}

			.avtar {
				display: inline-block;
				width: 150px;
				height: 150px;
				border-radius: 50%;
				margin-top: 100px;
				background: url(img/tong.jpg);
				background-size: cover;
				transition: 2s;
			}

			.avtar:hover {
				transform: rotate(360deg);
			}

			.intr .peointr {
				color: #fff;
				font-size: 24px;
				font-weight: bold;
				margin-top: 30px;
			}

			p {
				margin: 0 0 10px;
			}

			.title {
				width: 960px;
				box-sizing: border-box;
				/* 包含边距 */
				display: table;
				/* 此元素会作为块级表格来显示，表格前后带有换行符 */
				margin: 10px auto;
				/* 上下10像素,左右居中 */
				border-bottom: 1px dashed #019875;
				/* 下边框1px的虚线 */
				padding-bottom: 10px;
				/* 下内边距 */
				font-size: 24px;
				font-weight: bold;
				color: #019875;
				padding-left: 20px;
				transition: 1s;
				/* hover时过渡时间 */
			}

			.title:hover {
				width: 100%;
				/* 960px到100%过渡 */
				opacity: 0.5;
				/* 透明度 */
			}

			.content {
				width: 960px;
				box-sizing: border-box;
				display: table;
				margin: 20px auto;
				background: #fff;
				min-height: 350px;
				position: relative;
			}
			.content2 {
				width: 100%;
				box-sizing: border-box;
				display: table;
				margin: 20px auto;
				background: #fff;
				min-height: 500px;
				position: relative;
			}

			/* -----box1 */
			.box1-left {
				position: absolute;
				left: 0;
				width: 250px;
				height: 100%;
				background: url(img/bj2.jpg);
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-direction: column;
			}

			.logo-img {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				overflow: hidden;
				border: 2px solid #e0e2e1;
				margin-top: 80px;
			}

			.logo-img img {
				width: 100%;
				height: 100%;
			}

			.lookme {
				width: 120px;
				height: 40px;
				border-radius: 30px;
				background-color: #874cff;
				text-align: center;
				line-height: 40px;
				color: white;
				transition: 0.7s;
			}

			.lookme:hover {
				background: black;
				color: white;
			}

			.emailqq {
				width: 200px;
				height: 50px;
				/* background-color: #874cff; */
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
			}

			.embor {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				border: 1px solid #eaeaea;
			}

			.em1 {
				background: url(img/微博1.png) no-repeat center;
				background-color: #ffffff;
			}

			.em1:hover {
				background: url(img/微博2.png) no-repeat center;
				background-color: #874cff;
			}

			.em2 {
				background: url(img/邮箱1.png) no-repeat center;
				background-color: #ffffff;
			}

			.em2:hover {
				background: url(img/邮箱2.png) no-repeat center;
				background-color: #874cff;
			}

			.em3 {
				background: url(img/QQ1.png) no-repeat center;
				background-color: #ffffff;
			}

			.em3:hover {
				background: url(img/QQ2.png) no-repeat center;
				background-color: #874cff;
			}

			.em4 {
				background: url(img/微信1.png) no-repeat center;
				background-color: #ffffff;
			}

			.em4:hover {
				background: url(img/微信2.png) no-repeat center;
				background-color: #874cff;
			}

			.box1-right {
				position: absolute;
				left: 250px;
				width: 710px;
				height: 100%;
				/* background-color: #00ffff;				 */
			}

			.box1-right-nav {
				width: 70px;
				height: 100%;
				background: #f8e8e8;
				display: flex;
				flex-direction: column;
				float: left;
			}

			.nav-d1 {
				width: 99%;
				height: 25%;
				border: 1px solid #e9dbdb;
				font-size: 14px;
				/* 文字竖排 */
				/* writing-mode: vertical-rl; */
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}

			.nav-d1 p {
				height: 15px;
				padding-top: 5px;
			}

			.box1-right-hear {
				width: 640px;
				height: 100%;
				/* background-color: #ffaa7f; */
				float: left;
			}
			/* .box1-right-hear .hear-about1{
				display: block;
			} */
			.hear-about1 {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 70px;
				top: 0;
				/* background-color: #c8c8c8; */
				/* display: none; */
			}

			.hear-about1-box {
				width: 100%;
				height: 100%;
				padding: 20px;
				box-sizing: border-box;
			}

			.aboutme-ul {
				width: 100px;
				height: 40px;
				border-radius: 10px;
				background-color: #874cff;
				text-align: center;
				line-height: 40px;
				color: white;
				cursor: pointer;
				float: left;
				position: absolute;
				left: 20px;
				z-index: 2;
			}

			.aboutme-ul p {
				font-size: 18px;
				color: white;
			}

			.aboutme-li {
				width: 95px;
				height: 40px;
				background-color: #905dff;
				border-radius: 10px;
				border-bottom: 1px solid white;
				transition: 0.7s;
				margin: 1px auto;
			}

			.li-box {
				display: none;
				z-index: 3;
			}

			.aboutme-li:hover {
				background-color: #3a2170;
			}

			.aboutme-neirong {
				width: 640px;
				height: 100%;
				border: 2px solid #e0e2e1;
				float: left;
				box-sizing: border-box;
				position: absolute;
				top: 0;
				left: 0;
				overflow: hidden;

			}

			.jbxx {
				width: 640px;
				height: 100%;
				/* background-color: #019875; */
				position: relative;
				float: left;
			}

			.jbxx-k1 {
				width: 300px;
				height: 250px;
				background-color: rgba(255, 94, 127, .3);
				position: absolute;
				bottom: 10px;
				left: 10px;
				/* z-index: 2; */
			}

			.jbxx-k2 {
				width: 500px;
				height: 250px;
				background-color: rgba(85, 170, 255, 0.2);
				position: absolute;
				top: 50px;
				right: 10px;
				/* padding-left: 200px; */
			}

			.jbxx-k2-logo {
				width: 200px;
				height: 250px;
				float: left;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				/* background-color: #019875; */
			}

			.k2logo-img {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				overflow: hidden;
				border: 2px solid #e0e2e1;
				margin-bottom: 15px;
			}

			.k2logo-img img {
				width: 100%;
				height: 100%;
			}

			.jbxx-k2-name {
				width: 300px;
				height: 250px;
				float: left;
			}

			.xqah {
				width: 640px;
				height: 100%;
				background-color:white;
				position: relative;
				left: 0;
				top: 0;
				float: left;
				/* display: none; */
			}

			.nian {
				width: 110px;
				height: 40px;
				position: absolute;
				left: 260px;
				top: 30px;
				font-size: 30px;
				/* cursor: pointer; */
			}

			.grrz-center {
				width: 640px;
				height: 80%;
				border: 1px solid white;
				margin: 70px auto;
				overflow: hidden;
			}

			.cc-box1 {
				width: 640px;
				height: 75px;
				border-bottom: 1px solid white;
				overflow: auto;
				overflow-y: hidden;
				cursor: pointer;
			}

			.cc-box1-long {
				width: 800px;
				height: 75px;
				overflow: auto;
				overflow-x: auto;
				overflow-y: hidden;
			}

			.cc-box1-long div {
				width: 80px;
				height: 40px;
				/* background-color: #55ff7f; */
				margin: 10px;
				float: left;
				text-align: center;
				line-height: 50px;
				font-size: 18px;
			}

			.cc-box1-long div:hover {
				color: #ffaa7f;
				border-bottom: 2px solid #ffaa7f;

			}

			/* 设置cc-box1滚动条样式 */
			.cc-box1 {
				overflow-x: auto;
			}

			.cc-box1::-webkit-scrollbar {
				width: 5px;
				height: 6px;
			}

			.cc-box1::-webkit-scrollbar-track {
				background: #fff;
				border-radius: 6px;
			}

			.cc-box1::-webkit-scrollbar-thumb {
				background: #019875;
				border-radius: 12px;
			}

			.cc-box2 {
				width: 640px;
				height: 180px;
				overflow: auto;
				overflow-y: hidden;
				box-sizing: border-box;
				background-color: white;
				position: relative;
				overflow-x: hidden;
			}
			
			.cc-box2  .cc-box2-neirong {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 30px;
				left: 0;
				overflow-x: hidden;
				padding-left: 30px;
				box-sizing: border-box;
				display: block;
			}
			.cc-box2 div{
				display: none;
			}
			.biaop {
				font-size: 25px;
				color: #ffaa7f;
			}

			.wdjx {
				width: 640px;
				height: 100%;
				background-color: #ffffff;
				position: relative;
				left: 0;
				top: 0;
				float: left;
				/* display: none; */
			}
			.wdjx-t{
				width: 100%;
				height: 80px;
				line-height: 100px;
				/* background-color: #f0f4f0; */
				text-align: center;
			}
			.wdjx-t2{
				width: 100%;
				height: 30px;
				line-height: 20px;
				/* background-color: #f0f4f0; */
				text-align: center;
				font-size: 12px;
			}
			.wdjx-t3{
				width: 100%;
				height: 240px;
				line-height: 30px;
				/* background-color: #aaaa7f; */
				text-align: center;
				display: flex;
				flex-direction: row;
				
			}
			.wdjx-t3-box{
				width: 180px;
				height:200px;
				background-color: saddlebrown;
				position: relative;
				overflow: hidden;
				margin: 20px;
				border: 1px solid #aaaa7f ;
				border-radius: 5px;
			}
			.wdjx-t3-box img{
				width: 180px;
				height:160px;
			}
			.wdjx-t3-box .p{
				width: 180px;
				height:40px;
				background-color: #ffffff;
				line-height: 40px;
				text-align: center;
			}
			.wdjx-t3-li{
				width: 180px;
				height:40px;
				background-color: #ffaa00;
				position: absolute;
				bottom: -50px;
				transition: 0.6s;
				text-align: center;
				line-height: 40px;
				color: white;
			}
			.wdjx-t3-box:hover .wdjx-t3-li{
				/* display: block; */
				position: absolute;
				bottom: -10px;
			}
			/* 学习档案box */
			.hear-about2 {
				width: 640px;
				height: 100%;
				position: absolute;
				left: 70px;
				top: 0px;				
				background-color: #ffffff;
				display: none;
			}
			/* .BIGbox{
				display: none;
			} */
			.xuexi-box1{
				width: 80%;
				height: 40px;
				line-height: 40px;
				margin:0 auto ;
				border-bottom: 1px solid silver;
				padding-left: 20px;
				font-size: 20px;
			}
			.xuexi-box2{
				width: 80%;
				height: 100px;
				margin:0 auto ;
				padding-left: 20px;
				/* background-color: #cbcb98; */
			}
			.dang1{
				width: 40px;
				height: 30px;
				border-right: 2px solid silver;
				margin: 5px;
				float: left;
				position: relative;
			}
			.dang .dang-img{
				width: 60px;
				position: absolute;
				right: 20px;
			}
			.dang .dang-p{
				position: absolute;
				bottom: -60px;
				right: -20px;
				text-align: center;
			}
			.dang2,.dang3,.dang4{
				width: 120px;
				height: 30px;
				border-right: 2px solid silver;
				margin: 5px;
				float: left;
				position: relative;
			}
			.xuexi-box3{
				width: 100%;
				height: 200px;
				margin:0 auto ;
				padding-left: 20px;
			}
			.xuexi-box3 .xueimg{
				width: 170px;
				height: 200px;
				margin: 20px 10px 0 20px;
				float: left;
				border-radius: 10px;
				position: relative;
			}
			.xuexi-box3 img{
				width: 170px;
				height: 180px;
				border-radius: 10px;
			}
			.xueimg div{
				width: 170px;
				height: 180px;
				line-height: 180px;
				text-align: center;
				border-radius: 10px;
				position: absolute;
				top: 0;
				background-color: #905dff;
				transition: 0.6s;
				opacity: 0;
				font-size: 20px;
				color: white;
			}
			.xueimg:hover .zise1,.xueimg:hover .zise2,.xueimg:hover .zise3{
				opacity: 0.7;
			}
		/* 技术栈cs	 */
			.hear-about3{
				width: 640px;
				height: 100%;
				position: absolute;
				left: 70px;
				top: 0px;			
				display: none;
			}
			.shubenbj{
				width: 640px;
				height: 100%;
				opacity: 0.4;
				position: absolute;
			}
			.shubenbj img{
				width: 100%;
				height: 100%;
			}
			.skill{
				position: absolute;
				left: 270px;				
				margin: 10px auto;
				font-size: 35px;
				color: #3a383a;
			}
			.shujutu{
				position: absolute;
				left: 50px;
				top: 80px;
				width: 550px;
				height: 250px;
				/* border: 1px solid ; */
			}
			.shujutubox1{
				width: 85%;
				height: 50px;
				border-top: 1px solid #ada9a8;
				margin: 0 auto;
				position: relative;
			}
			.shujutubox1 span{
				position: absolute;
				left: -50px;
				top: -12px;
			}
			.shuju-css{
				position: absolute;
				left: 60px;
				bottom: 45px;
				width: 25px;
				height:165px ;
				/* background-color: #ffffff; */
				background-color: #ecac29;
				box-shadow:#706e69 4px -1px 5px ;
			}
			.shuju-js{
				position: absolute;
				left: 160px;
				bottom: 45px;
				width: 25px;
				height:140px ;
				/* background-color: #ffffff; */
				background-color: #ecac29;
				box-shadow:#706e69 4px -1px 5px ;
			}
			.shuju-html{
				position: absolute;
				left: 260px;
				bottom: 45px;
				width: 25px;
				height:190px ;
				/* background-color: #ffffff; */
				background-color: #ecac29;
				box-shadow:#706e69 4px -1px 5px ;
			}
			.shuju-vue{
				position: absolute;
				left: 360px;
				bottom: 45px;
				width: 25px;
				height:120px ;
				/* background-color: #ffffff; */
				background-color: #ecac29;
				box-shadow:#706e69 4px -1px 5px ;
			}
			.shuju-uniapp{
				position: absolute;
				left: 460px;
				bottom: 45px;
				width: 25px;
				height:65px ;
				/* background-color: #ffffff; */
				background-color: #ecac29;
				box-shadow:#706e69 4px -1px 5px ;
			}
			.cchove{
				width: 100%;
				height: 0%;
				background-color: #ba8720;
				position: absolute;
				bottom: 0;
				transition:.5s;
			}
			.shuju-css:hover .cchove,
			.shuju-js:hover .cchove,
			.shuju-vue:hover .cchove,
			.shuju-html:hover .cchove,
			.shuju-uniapp:hover .cchove{
				height:100% ;
			}
			
			.shujumc{
				background-color: #fdffff;
				padding: 3px;
				position: absolute;
				bottom: -28px;
			}
			.shujuzhi{
				position: absolute;
				top: -28px;
			}
		/* 未来规划box */
			.hear-about4{
				width: 640px;
				height: 100%;
				position: absolute;
				left: 70px;
				top: 0px;			
				background: url(img/未来规划bj.jpg);
				display: none;
			}
			.weilaibox1{
				width: 190px;
				position: absolute;
				left: 65px;
				top: 20px;	
				/* border:3px solid #efe0e0;
				border-radius: 20px;
				background-color: #f8e8e8; */
			}
			.weilaibox2{
				width: 160px;
				position: absolute;
				left: 25px;
				bottom: 140px;					
			}
			.weilaibox3{
				width: 190px;
				position: absolute;
				left: 55px;
				bottom: 20px;					
			}
			.weilaibox4{
				width: 160px;
				position: absolute;
				right: 20px;
				top: 50px;					
			}
			.weilaibox5{
				width: 140px;
				position: absolute;
				right: 30px;
				bottom: 20px;					
			}
			@keyframes  inleft{
				0% {
					opacity: 0;
					transform: translateX(-50px);
				}
				
				100% {
					opacity: 1;
					transform: translateX(0px);
				}
			}
			.inleft {
				animation-name: inleft;
			}
			.weilaibox1:hover,
			.weilaibox2:hover,
			.weilaibox3:hover,
			.weilaibox4:hover,
			.weilaibox5:hover{
				color: #019875;		
			}
	/* 键盘打字box		 */
			.daziyx{
				width: 400px;
				height: 80px;
				/* background-color: #019875; */
				margin: 0 auto;
				text-align: center;
				color: #1d9898;
				line-height: 80px;
				font-size: 40px;
				font-family: '宋体';
			}
			.youxibox{
				width: 960px;
				height: 350px;
				/* background-color: #019875; */
				margin: 0 auto;
			}
			.di1hang{
				width: 100%;
				height: 100px;
				margin: 0 auto;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
			}
			.di2hang{
				width: 88%;
				height: 100px;
				margin: 0 auto;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
			}
			.di3hang{
				width: 72%;
				height: 100px;
				margin: 0 auto;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
			}
			.anjian{
				width: 80px;
				height: 80px;
				background-color: #019875;
				text-align: center;
				line-height: 80px;
				color: white;
				font-size: 30px;
			}
			.anjian2{
				background-color: #00d099;
				box-shadow: 0 0 15px x#00ffb7;
			}
			.pic.pic1 {
				transform: rotate(-15deg) translateX(50px) translateY(40px);
			}

			.pic.pic2 {
				transform: rotate(0deg) translateX(90px) translateY(0px);
			}

			.pic.pic3 {
				transform: rotate(15deg) translateX(120px);
			}

			.pic {
				width: 220px;
				height: 300px;
				padding: 15px;
				background-color: #f1f1f1;
				/* 在元素之后不添加换行符，因此该元素可以位于其他元素旁边
				display: inline-block，将保留上下外边距/内边距， */
				display: inline-block;
				float: left;
				margin: 10px;
				transition: .6s;
				cursor: pointer;
				/* 鼠标手指 */
			}

			.pic1:hover {
				background: #019875;
				opacity: 0.8;
				transform: rotate(0deg) translateX(40px) translateY(5px);
			}

			.pic2:hover {
				background: #019875;
				opacity: 0.8;
				transform: translateX(90px);
			}

			.pic3:hover {
				background: #019875;
				opacity: 0.8;
				transform: rotate(0deg) translateX(150px);
			}

			.pic:hover img {
				transform: scale(1.2);
			}

			.pic:hover p {
				color: white;
			}

			.imgbox {
				width: 220px;
				height: 250px;
				overflow: hidden;
			}

			.pic img {
				width: 220px;
				height: 250px;
				transition: 2s;
			}

			img {
				vertical-align: middle;
				border: 0;
			}

			.pic p {
				color: #019875;
				padding-top: 5px;
				text-align: center;
				font-size: 20px;
			}

			p {
				margin: 0 0 10px;
			}
			@keyframes  inrua{
				0% {
					opacity: 0;
					transform: translateX(50px);
				}
				
				100% {
					opacity: 1;
					transform: translateX(0px);
				}
			}
			.inrua {
				animation-name: inrua;
			}
			/* 自定义动画名 函数 */
			@keyframes INUP {
				0% {
					opacity: 0;
					transform: translateY(400px);
				}

				100% {
					opacity: 1;
					transform: translateX(0px);
				}
			}
			/* 调用inup */
			.INUP {
				animation-name: INUP;
			}

			.videobox,
			.musicbox {
				width: 100%;
				height: 100%;
				background-color: silver;
				position: absolute;
				display: none;
			}

			.picbox {
				width: 100%;
				height: 100%;
				background-color: white;
				position: absolute;
				display: none;
			}

			#ai1 {
				/* display: none; */
			}

			iframe {
				width: 300px;
				height: 100px;
				margin: 10px;
			}

			video {
				width: 100%;
				height: 100%;
			}

			/* 设置body滚动条样式 */
			body {
				overflow-y: scroll;
			}

			body::-webkit-scrollbar {
				width: 10px;
			}

			body::-webkit-scrollbar-track {
				background: #fff;
				border-radius: 12px;
			}

			body::-webkit-scrollbar-thumb {
				background: #019875;
				border-radius: 12px;
			}

			.Xfanhui,
			.Xfanhui2,
			.Xfanhui3 {
				position: absolute;
				right: 10px;
				top: 10px;
				font-size: 26px;
				color: black;
				cursor: pointer;
				transform: 1.5s;
			}

			.Xfanhui:hover,
			.Xfanhui2:hover {
				transform: scale(2);
				color: white;
			}

			.Xfanhui3:hover {
				transform: scale(2);
				color: red;
			}

			.m-left {
				width: 300px;
				height: 100%;
				position: absolute;
				left: 0;
				background: white;
				box-sizing: border-box;
				overflow: auto;

			}

			.m-left::-webkit-scrollbar {
				display: none;
			}

			.m-left h3 {
				padding: 10px;
			}

			.m-left p {
				border: 1px solid #c8c8c8;
				padding: 10px;
				cursor: pointer;
			}

			.m-left p:hover {
				border: 1px solid #019875;
				color: #019875;
			}

			.m-right {
				width: 660px;
				height: 100%;
				position: absolute;
				left: 300px;
				background: seagreen;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.play {
				width: 200px;
				height: 200px;
				border-radius: 50%;
				border: 3px solid white;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: 5s;
				transform: rotate(0deg);
			}

			.play2 {
				width: 200px;
				height: 200px;
				border-radius: 50%;
				border: 3px solid white;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: 5s;
				transform: rotate(355deg);
			}


			.play p {
				text-align: center;
				z-index: 99;
			}

			.m-right img {
				width: 200px;
				height: 200px;
				border-radius: 50%;
				position: absolute;
			}

			.m-right p {
				padding: 20px;
				font-size: 30px;
			}

			.oo {
				width: 50px;
				height: 50px;
				overflow: hidden;
				border-radius: 50%;
			}

			.btn-left {
				position: absolute;
				left: 0;
				top: 125px;
				width: 80px;
				height: 80px;
			}

			.btn-left:active,
			.btn-right:active {
				transform: scale(0.8);
			}

			.btn-right {
				position: absolute;
				right: 0;
				top: 125px;
				width: 80px;
				height: 80px;
			}

			.picbox-center {
				margin: 0 auto;
				width: 800px;
				height: 350px;
				overflow: hidden;
				/* border: 1px solid ; */
			}

			.long-img {
				/* background-color:rgba(244, 221, 239, 0.5); */
				width: 1900px;
				height: 350px;
				transition: 0.8s;
				position: relative;
				left: 0;
			}

			.pic-box {
				width: 120px;
				height: 180px;
				background-color: #b8d7ff;
				float: left;
				margin-top: 85px;
				margin-right: 30px;
				transition: all 0.5s;
				overflow: hidden;
			}

			.pic-box img,
			.pic-box2 img {
				width: 100%;
				height: 100%;
				transition: 0.5s;
				pointer-events: none;
			}

			.pic-box:hover,
			.pic-box2:hover {
				transform: scale(1.1);
			}

			.pic-box2 {
				width: 200px;
				height: 280px;
				background-color: #b8d7ff;
				float: left;
				margin-top: 40px;
				margin-right: 30px;
				box-shadow: black;
				transition: all 0.5s;
				/* 阴影颜色 --水平偏移量 --垂直偏移量--模糊距离 --阴影尺寸--内阴影 */
				box-shadow: darkgrey 5px 5px 30px 2px;
			}
			.dibu-footer{
				width: 100%;
				height: 100px;
				text-align: center
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="blog-masthead">
				<div class="container">
					<nav class="blog-nav">
						<a class="blog-nav-item active" href="web个人简介.html">首页</a>
						<a class="blog-nav-item" href="#part1">关于我</a>
						<a class="blog-nav-item" href="#part2">生活</a>
						<a class="blog-nav-item" href="#part3">技术</a>
					</nav>
				</div>
			</div>
			<div class="intr">
				<span class="avtar"></span>
				<p class="peointr">计算机网络技术-网站202-2030602183</p>
				<p class="peointr">爱生活，爱旅行，爱技术</p>
			</div>
			<!-- --------box1个人介绍模块 -->
			<div class="title" id="part1">关于我</div>
			<div class="content">
				<div class="box1-left">
					<div class="logo-img">
						<img src="img/7.jpg" alt="">
					</div>
					<div class="lookme">
						lookme
					</div>
					<div class="emailqq">
						<div class="embor em1"></div>
						<div class="embor em2"></div>
						<div class="embor em3"></div>
						<div class="embor em4"></div>
					</div>
				</div>
				<!-- ------right1 -->
				<div class="box1-right">
					<div class="box1-right-nav">
						<div class="nav-d1" >
							<img class="navlogo" src="img/个人.png" alt="">
							<p>About</p>
						</div>
						<div class="nav-d1">
							<img class="navlogo" src="img/学习.png" alt="">
							<p>学习档案</p>
						</div>
						<div class="nav-d1">
							<img class="navlogo" src="img/HTML.png" alt="">
							<p>技术栈</p>
						</div>
						<div class="nav-d1">
							<img class="navlogo" src="img/工作规划.png" alt="">
							<p>未来规划</p>
						</div>
					</div>
					<div class="box1-right-hear">
				<!-- about个人信息box1 -->
						<div class="hear-about1 BIGbox">
							<div class="hear-about1-box">
								<!-- <p>About Me</p> -->
								<div class="aboutme-ul">
									<span class="ul-span">About Me</span>
									<div class="li-box">
										<div class="aboutme-li">基本信息</div>
										<div class="aboutme-li">个人日志</div>
										<div class="aboutme-li">我的家乡</div>
									</div>
								</div>
								<div class="aboutme-neirong">
									<div class="jbxx myb " id="jbxx">
										<div class="jbxx-k1 wow animate__fadeInLeft" data-wow-offset="10"
											data-wow-delay="0s" data-wow-duration="1s"></div>
										<div class="jbxx-k2  wow animate__fadeInRight" data-wow-offset="10"
											data-wow-delay="0s" data-wow-duration="1s">
											<div class="jbxx-k2-logo">
												<div class="k2logo-img">
													<img src="img/7.jpg" alt="">
												</div>
												<div class="lookme">
													lookme
												</div>
											</div>
											<div class="jbxx-k2-name">
												<p>Name：Zhang Zijie</p>
												<p>Class：网站202</p>
												<p>Student ID：2030602183</p>
												<p>AGE：22</p>
												<p>SEX：Man</p>
												<p>Native place：Guangdong</p>
												<p>HOBBY：Play basketball</p>
												<p>&emsp;&emsp;&emsp;&emsp;
													Learn programming</p>
											</div>
										</div>

									</div>
									<div class="xqah myb" id="xqah">
										<div class="nian wow animate__fadeInLeft"data-wow-offset="10"
											data-wow-delay="0s" data-wow-duration="1s">2022年</div>
										<div class="grrz-center">
											<div class="cc-box1 wow animate__fadeInLeft"data-wow-offset="10"
											data-wow-delay="0s" data-wow-duration="1s">
												<div class="cc-box1-long">
													<div>10月11日</div>
													<div>10月12日</div>
													<div>10月13日</div>
													<div>10月14日</div>
													<div>10月15日</div>
													<div>10月16日</div>
													<div>10月17日</div>
													<div>10月18日</div>
												</div>
											</div>
											<div class="cc-box2  wow animate__fadeInRight" data-wow-offset="10"
											data-wow-delay="0s" data-wow-duration="1s" >
												<div class="cc-box2-neirong">
													<p class="biaop">高淳培训</p>
													<p>学校在这个时候组织高淳培训java，内心是拒绝的，但是没办法。</p>
												</div>
												<div >
													<p class="biaop">总在不经意的年生。回首彼岸，纵然发现光景绵长。</p>
													<p>何如薄幸锦衣郎，比翼连枝当日愿。</p>
												</div>
												<div >
													<p class="biaop">《面朝大海，春暖花开》</p>
													<p>从明天起，做一个幸福的人喂马，劈柴，周游世界从明天起，关心粮食和蔬菜我有一所房子，面朝大海，春暖花开</p>
												</div>
												<div >
													<p class="biaop">偶然</p>
													<p>我是天空里的一片云，偶尔投影在你的波心——</p>
												</div>
												<div >
													<p class="biaop">远和近</p>
													<p>你，一会看我，一会看云。我觉得，你看我时很远，你看云时很近。</p>
												</div>
												<div >
													<p class="biaop">假如生活欺骗了你</p>
													<p>假如生活欺骗了你？不要悲伤 不要心急!忧郁的日子里须要镇静!相信吧 快乐的日子将会来临!</p>
												</div>
												<div >
													<p class="biaop">《回答》</p>
													<p>卑鄙是卑鄙者的通行证，高尚是高尚者的墓志铭，　看吧，在那镀金的天空中，　飘满了死者弯曲的倒影。</p>
												</div>
												<div >
													<p class="biaop">《沙扬娜拉》</p>
													<p>最是那一低头的温柔，象一朵水莲花，不胜凉风的娇羞，道一声珍重，道一声珍重，那一声珍重里有蜜甜的忧愁——沙扬娜拉！</p>
												</div>
											</div>
										</div>
									</div>
									<div class="wdjx myb wow INUP" data-wow-offset="10" data-wow-delay="0s" data-wow-duration="1s">
										<div class="wdjx-t ">
											-- 我的家乡 --
										</div>
										<div class="wdjx-t2 ">
										常州，又称龙城，地处长江之南、太湖之滨，是一座有3200多年左右历史的文化名城，境内风景名胜、历史古迹较多。
										</div>
										<div class="wdjx-t3">
											<div class="wdjx-t3-box">
												<img src="img/t1.png" alt="">
												<p class="p">宝塔、照壁、观音</p>
												<p class="wdjx-t3-li">天宁寺</p>
											</div>
											<div class="wdjx-t3-box">
												<img src="img/t2.png" alt="">
												<p class="p">动漫艺术、游戏文化</p>
												<p class="wdjx-t3-li">环球动漫嬉戏谷</p>
											</div>
											<div class="wdjx-t3-box">
												<img src="img/t3.png" alt="">
												<p class="p">牌楼、堤坝、公园</p>
												<p class="wdjx-t3-li">天目湖</p>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
			<!-- 学习档案box2 -->
						<div class="hear-about2 BIGbox wow inrua" data-wow-offset="10" data-wow-delay="0s" data-wow-duration="1s">
							<div class="xuexi-box1">
								学习档案
							</div>
							<div class="xuexi-box2">
								<div class="dang1 dang">
									<img class="dang-img" src="img/小学1.png" alt="">
									<p class="dang-p">2008 <br> 小学</p>
								</div>
								<div class="dang2 dang">
									<img class="dang-img" src="img/初中1.png" alt="">
									<p class="dang-p">2014<br> 初中</p>
								</div>
								<div class="dang3 dang">
									<img class="dang-img" src="img/高中1.png" alt="">
									<p class="dang-p">2017<br> 高中</p>
								</div>
								<div class="dang4 dang">
									<img class="dang-img" src="img/大学1.png" alt="">
									<p class="dang-p">2020<br> 大学</p>
								</div>
							</div>
							<div class="xuexi-box3">
								<div class="xueimg">
									<img src="img/dang1.jpg" alt="">
									<div class="zise1">Image</div>
								</div>
								<div class="xueimg">
									<img src="img/dang2.jpg" alt="">
									<div class="zise2">Image</div>
								</div>
								<div class="xueimg">
									<img src="img/dang3.jpg" alt="">
									<div class="zise3">Image</div>
								</div>
							</div>
						</div>
			<!-- 技术栈box3 -->
						<div class="hear-about3 BIGbox wow inrua" data-wow-offset="10" data-wow-delay="0s" data-wow-duration="1s">
							<div class="shubenbj">
								<img src="img/书本.jpg" alt="">
							</div>
							<div class="skill">Skill Set</div>							
							<div class="shujutu">
								<div class="shujutubox1"><span>100%</span></div>
								<div class="shujutubox1"><span>75%</span></div>
								<div class="shujutubox1"><span>50%</span></div>
								<div class="shujutubox1"><span>25%</span></div>
								<div class="shujutubox1"><span>0%</span></div>
								<div class="shuju-css">
									<span class="shujumc">CSS</span>
									<span class="shujuzhi">78%</span>
									<div class="cchove"></div>
								</div>
								<div class="shuju-js">
									<span class="shujumc">JavaScript</span>
									<span class="shujuzhi">70%</span>
									<div class="cchove"></div>
								</div>
								<div class="shuju-vue">
									<span class="shujumc">Vue</span>
									<span class="shujuzhi">60%</span>
									<div class="cchove"></div>
								</div>
								<div class="shuju-html">
									<span class="shujumc">HTML</span>
									<span class="shujuzhi">95%</span>
									<div class="cchove"></div>
								</div>
								<div class="shuju-uniapp">
									<span class="shujumc">uniapp</span>
									<span class="shujuzhi">30%</span>
									<div class="cchove"></div>
								</div>
							</div>
						</div>
			<!-- 未来规划box4 -->
						<div class="hear-about4 BIGbox">
							<div class="weilaibox1 wow inleft"  data-wow-offset="10" data-wow-delay="0s" data-wow-duration="1s">
								<b>&emsp;毕业实习</b><br>
								<p>2022/12/1即将毕业，首先应该是寻找到一份稳定的工作。</p>
							</div>
							<div class="weilaibox2 wow inleft"  data-wow-offset="10" data-wow-delay="0s" data-wow-duration="1s">
								<b>&emsp;稳定工作</b><br>
								<p>努力在前端道路上发展，寻找机缘！</p>
							</div>
							<div class="weilaibox3 wow inleft"  data-wow-offset="10" data-wow-delay="0s" data-wow-duration="1s">
								<b>&emsp;开发一款小游戏</b><br>
								<p>通过日积月累的学习与经验开发一款游戏或者app</p>
							</div>
							<div class="weilaibox4 wow inrua"  data-wow-offset="10" data-wow-delay="0s" data-wow-duration="1s">
								<b>&emsp;考驾照</b><br>
								<p>3个月时间考取驾驶证</p>
							</div>
							<div class="weilaibox5 wow inrua"  data-wow-offset="10" data-wow-delay="0s" data-wow-duration="1s">
								<b>&emsp;养一只宠物</b><br>
								<p>毕业后养一只布偶或者美短</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- --------box2生活模块 -->
			<div class="title" id="part2">爱生活</div>
			<div class="content">
				<div id="ai1" class="wow INUP" data-wow-offset="10" data-wow-delay="0s" data-wow-duration="1s">
					<div class="pic pic1">
						<div class="imgbox" id="imgbox">
							<img src="img/看视频.jpg" alt="">
						</div>
						<p>剪辑视频</p>
					</div>
					<div class="pic pic2">
						<div class="imgbox" id="music">
							<img src="img/听音乐.jpg" alt="">
						</div>
						<p>听音乐</p>
					</div>
					<div class="pic pic3">
						<div class="imgbox" id="zhaopian">
							<img src="img/shouyeimg.jpg" alt="">
						</div>
						<p>摄影</p>
					</div>
				</div>
				<!-- data-wow-offset="10" -->
				<div class="videobox wow animate__zoomIn" data-wow-delay="0s" data-wow-duration="1s">
					<!-- <iframe src="//player.bilibili.com/player.html?aid=37822879&bvid=BV17t411q7bZ&cid=66492142&page=1"
					scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> -->
					<video controls src="video/琳.mp4"></video>
					<span class="Xfanhui">×</span>
				</div>
				<div class="musicbox wow animate__zoomIn" data-wow-delay="0s" data-wow-duration="1s">
					<div class="m-left">
						<h3>默认收藏</h3>
						<p @click='songHandler(index)' v-for='(item,index) in musicData' :key="item.id"
							:class='{active:index===currentIndex}'>{{item.text}}</p>
					</div>
					<div class="m-right">
						<!-- onmouseover -->
						<div class="play" onclick="myfun()">
							<img :src="musicData[currentIndex].img" alt="">
							<div class="oo">
								<!-- <audio id="audio" controls   autoplay > -->
								<audio id="audio" :src="musicData[currentIndex].songSrc" controls autoplay
									@ended='nextHanlder'></audio>
								<!-- </audio>  source-->
							</div>
						</div>
						<p class="yinyueming">1111111</p>
					</div>
					<span class="Xfanhui2">×</span>
				</div>
				<div class="picbox wow animate__zoomIn" data-wow-delay="0s" data-wow-duration="1s">
					<div class="btn-left">
						<img src="img/上一页.png" alt="">
					</div>
					<div class="picbox-center">
						<div class="long-img">
							<div class="pic-box"><img src="img/轮播图1.jpg"></div>
							<div class="pic-box"><img src="img/轮播图2.jpg"></div>
							<div class="pic-box2"><img src="img/轮播图3.jpg"></div>
							<div class="pic-box"><img src="img/轮播图4.jpg"></div>
							<div class="pic-box"><img src="img/轮播图5.jpg"></div>
							<div class="pic-box"><img src="img/轮播图6.jpg"></div>
							<div class="pic-box"><img src="img/轮播图7.jpg"></div>
							<div class="pic-box"><img src="img/轮播图8.jpg"></div>
							<div class="pic-box"><img src="img/轮播图9.jpg"></div>
						</div>
					</div>
					<div class="btn-right">
						<img src="img/下一页.png" alt="">
					</div>
					<span class="Xfanhui3">×</span>
				</div>
			</div>
			<!-- --------box3技术模块 -->
			<div class="title" id="part3">爱技术</div>
			<div class="content2">
				<div class="daziyx">打字小游戏</div>
				<div class="youxibox">
					<div class="di1hang">
						<div class="anjian">Q</div>
						<div class="anjian">W</div>
						<div class="anjian">E</div>
						<div class="anjian">R</div>
						<div class="anjian">T</div>
						<div class="anjian">Y</div>
						<div class="anjian">U</div>
						<div class="anjian">I</div>
						<div class="anjian">O</div>
						<div class="anjian">P</div>
					</div>
					<div class="di2hang">
						<div class="anjian">A</div>
						<div class="anjian">S</div>
						<div class="anjian">D</div>
						<div class="anjian">F</div>
						<div class="anjian">G</div>
						<div class="anjian">H</div>
						<div class="anjian">J</div>
						<div class="anjian">K</div>
						<div class="anjian">L</div>
					</div>
					<div class="di3hang">
						<div class="anjian">Z</div>
						<div class="anjian">X</div>
						<div class="anjian">C</div>
						<div class="anjian">V</div>
						<div class="anjian">B</div>
						<div class="anjian">N</div>
						<div class="anjian">M</div>
					</div>
				</div>
				
			</div>
			<div class="dibu-footer">
				<div>设计作品：个人简历</div>
				<div>设计时间：2022/10/15</div>
				<div>设计者：Zhang Zijie</div>
			</div>
		</div>
	</body>
	<script src="http://cdn.dowebok.com/131/js/wow.min.js"></script>
	<script src="js/play.js"></script>
	<script>
		var musicData = [{
				id: 1,
				text: 'Eliaukub - 水星记×0.8',
				songSrc: 'audio/Eliaukub - 水星记×0.8.mp3',
				img: 'img/1.jpg'
			},
			{
				id: 2,
				text: 'Healer. - 不会说谎的恰恰',
				songSrc: 'audio/Healer. - 不会说谎的恰恰.mp3',
				img: 'img/2.jpg'
			},
			{
				id: 3,
				text: '老涵本人 - 知足（翻唱）',
				songSrc: 'audio/老涵本人 - 知足（翻唱）.mp3',
				img: 'img/3.jpg'
			},
			{
				id: 4,
				text: '缺氧',
				songSrc: 'audio/缺氧.mp3',
				img: 'img/4.jpg'
			},
			{
				id: 5,
				text: '忽然之间（吉他版）',
				songSrc: 'audio/忽然之间（吉他版）.mp3',
				img: 'img/5.jpg'
			},
			{
				id: 6,
				text: '迷人的危险（翻唱）',
				songSrc: 'audio/迷人的危险（吉他版）.mp3',
				img: 'img/6.jpg'
			},
			{
				id: 7,
				text: '揉碎夜的光',
				songSrc: 'audio/揉碎夜的光（吉他版）.mp3',
				img: 'img/7.jpg'
			},
			{
				id: 8,
				text: '文艺青年 - 即兴',
				songSrc: 'audio/文艺青年 - 即兴.mp3',
				img: 'img/8.jpg'
			}

		];
		new Vue({
			el: '#app',
			data() {
				return {
					musicData: [],
					currentIndex: 0,
					
				}
			},
			methods: {
				//点击那首歌播放哪一首
				songHandler(i) {
					this.currentIndex = i;
					// audio.play(i);
				},
				//播放下一首
				nextHanlder() {
					this.currentIndex++;
				}
			},
			created() {
				//赋值变量
				this.musicData = musicData
			}
		})
	</script>
	<script>
		new WOW().init();

		var imgbox = document.getElementById('imgbox');
		var music = document.getElementById('music');
		var zhaopian = document.getElementById('zhaopian');
		var ai1 = document.getElementById('ai1');
		var videobox = document.querySelector('.videobox');
		var musicbox = document.querySelector('.musicbox');
		var picbox = document.querySelector('.picbox');
		var Xfanhui = document.querySelector('.Xfanhui');
		var Xfanhui2 = document.querySelector('.Xfanhui2');
		var Xfanhui3 = document.querySelector('.Xfanhui3');
		imgbox.onclick = function() {
			ai1.style.display = 'none';
			videobox.style.display = 'block';
		}
		Xfanhui.onclick = function() {
			ai1.style.display = 'block';
			videobox.style.display = 'none';
		}
		music.onclick = function() {
			ai1.style.display = 'none';
			musicbox.style.display = 'block';
		}
		Xfanhui2.onclick = function() {
			ai1.style.display = 'block';
			musicbox.style.display = 'none';
		}
		zhaopian.onclick = function() {
			ai1.style.display = 'none';
			picbox.style.display = 'block';
		}
		Xfanhui3.onclick = function() {
			ai1.style.display = 'block';
			picbox.style.display = 'none';
		}
		// 点击切换音乐
		var btns = document.querySelectorAll('.m-left p');
		var yinyueming = document.querySelector('.yinyueming');
		var play = document.querySelector('.play');
		var audio = document.getElementById('audio');
		var source = document.getElementById('source');
		for (var i = 0; i < btns.length; i++) {
			btns[i].onclick = function() {
				yinyueming.innerHTML = this.innerHTML;
			}
		}
		// 轮播图
		var imgarr = document.querySelectorAll('.long-img div');
		var btn_left = document.querySelector('.btn-left');
		var longbox = document.querySelector('.long-img');
		var btn_right = document.querySelector('.btn-right');
		var index = 0;
		var index2 = 0;
		for (var i = 0; i < imgarr.length; i++) {
			btn_left.onclick = function() {
				index--;
				console.log(index)
				if (index <= -4) {
					index = -4;
				}
				longbox.style.left = index * 150 + 'px';
				abc();
			}
			btn_right.onclick = function() {
				index++;
				console.log(index)
				if (index >= 0) {
					index = 0;
				}
				longbox.style.left = index * 150 + 'px';
				abc();
			}

			function abc() {
				if (index == -1) {
					imgarr[3].className = 'pic-box2';
				} else {
					imgarr[3].className = 'pic-box';
				}
				if (index == -2) {
					imgarr[4].className = 'pic-box2';
				} else {
					imgarr[4].className = 'pic-box';
				}
				if (index == -3) {
					imgarr[5].className = 'pic-box2';
				} else {
					imgarr[5].className = 'pic-box';
				}
				if (index == -4) {
					imgarr[6].className = 'pic-box2';
				} else {
					imgarr[6].className = 'pic-box';
				}
				if (index == 0) {
					imgarr[2].className = 'pic-box2';
				} else {
					imgarr[2].className = 'pic-box';
				}
			}
		}

		// nav个人信息导航按钮
		var navd1=document.querySelectorAll('.box1-right-nav .nav-d1');
		var navlogo=document.getElementsByClassName('navlogo');
		var yuanimg=['img/个人.png','img/学习.png','img/HTML.png','img/工作规划.png'];
		var arrimg=['img/个人2.png','img/学习2.png','img/HTML2.png','img/工作规划2.png'];
		
		var aboutBigbox=document.querySelectorAll('.box1-right-hear .BIGbox');
		console.log(aboutBigbox)
		for(var i=0;i<navd1.length;i++){
			navd1[i].index=i;
			navd1[i].onclick = function() {
				for(var i=0;i<navd1.length;i++){
					navd1[i].style.color = 'black';
					navd1[i].style.background = '#f8e8e8';
					navlogo[i].src=yuanimg[i];
					aboutBigbox[i].style.display='none';
				}
					this.style.color = 'white';
					this.style.background = '#9347ff';
					navlogo[this.index].src=arrimg[this.index];
					aboutBigbox[this.index].style.display='block';
			}
		}
		
		

		// about me下拉菜单
		var ul = document.querySelector('.aboutme-ul');
		var ulspan = document.querySelector('.ul-span');
		var li = document.querySelector('.li-box');
		//获取下拉菜单选项(*****直接从大盒子中获取里面的一组元素****)
		var libox = document.querySelectorAll('.li-box div');
		// 定义一个开关，用于显示和隐藏的效果
		var Onoff = false;
		var aboutbox = document.querySelectorAll('.aboutme-neirong .myb');
		// console.log(aboutbox)
		// 调用函数，按钮点击事件
		ul.onclick = function() {
			// 利用if语句来判断
			if (ul.style.height == '40px') { //Onoff == false
				ul.style.height = '162px';
				li.style.display = 'block';

				//Onoff = true;
			} else {
				ul.style.height = '40px';
				li.style.display = 'none';
				//Onoff = false;
			}
			var Onoff = !Onoff; //将开关取反
		}
		//下拉菜单切换成li
		
		for (var i = 0; i < libox.length; i++) {
			libox[i].onclick = function() {
				//设置一个索引值（下标）
				console.log(1)
				ulspan.innerHTML = this.innerHTML;
			}
			libox[0].onclick = function() {
				for (var j = 0; j < aboutbox.length; j++) {
					nno();
					aboutbox[0].style.display = 'block';
					ulspan.innerHTML = libox[0].innerHTML;
				}
			}
			libox[1].onclick = function() {
				for (var j = 0; j < aboutbox.length; j++) {
					nno();
					aboutbox[1].style.display = 'block';
					ulspan.innerHTML = libox[1].innerHTML;
				}
			}
			libox[2].onclick = function() {
				for (var j = 0; j < aboutbox.length; j++) {
					nno();
					aboutbox[2].style.display = 'block';
					ulspan.innerHTML = libox[2].innerHTML;
				}
			}
			
		}

		function nno() {
			aboutbox[0].style.display = 'none';
			aboutbox[1].style.display = 'none';
			aboutbox[2].style.display = 'none';
		}
		
		var btns = document.querySelectorAll('.cc-box1-long div');
		var divs = document.querySelectorAll('.cc-box2 div');
		for(var i=0;i<btns.length;i++){		//弄一个循环（导航栏按钮的循环）
			btns[i].index=i;				//设置一个索引值（下标）
			btns[i].onclick=function(){		//获取导航栏按钮每一个，点击事件
				for(j=0;j<btns.length;j++){	//设置循环（目的是为了让btn按钮和div块的样式class全部隐藏）
					btns[j].className="";	//全部按钮的样式隐藏
					divs[j].className="";	//全部div的样式隐藏
				}
				this.className="cc-box2-neirong";	//this点击这个按钮的时候，显示class样式active。
				divs[this.index].className="cc-box2-neirong";	//div的下标。显示样式
			}
		}
		// 学校图标hover效果
		var list=document.getElementsByClassName('dang-img');
		list[0].onmouseover=function(){
			list[0].src='img/小学2.png';
		}
		list[0].onmouseout=function(){
			list[0].src='img/小学1.png';
		}
		list[1].onmouseover=function(){
			list[1].src='img/初中2.png';
		}
		list[1].onmouseout=function(){
			list[1].src='img/初中1.png';
		}
		list[2].onmouseover=function(){
			list[2].src='img/高中2.png';
		}
		list[2].onmouseout=function(){
			list[2].src='img/高中1.png';
		}
		list[3].onmouseover=function(){
			list[3].src='img/大学2.png';
		}
		list[3].onmouseout=function(){
			list[3].src='img/大学1.png';
		}
		
		
	</script>
</html>
